/* ==================== 基础样式 & 背景 ==================== */
.root {
	-fx-base: #f8f9fa;
	-fx-background-color: linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%);
	-fx-font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC";
	-fx-font-size: 14px;
	-fx-text-fill: #2d3436;
	-fx-accent: #6c5ce7;
	-fx-focus-color: #6c5ce7;
	-fx-faint-focus-color: rgba(108, 92, 231, 0.2);
	-fx-background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10zm-38 0c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10zm10-38c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10zm28 0c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z' fill='%23dfe6e9' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* 卡片容器背景 (覆盖花纹) */
.card-container {
	-fx-background-color: rgba(255, 255, 255, 0.9);
	-fx-background-radius: 12px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0, 0, 2);
	-fx-padding: 20px;
}

/* ==================== 文本与标签 ==================== */
.label {
	-fx-text-fill: #2d3436;
	-fx-font-weight: 400;
}

.label.title {
	-fx-font-size: 20px;
	-fx-font-weight: 600;
	-fx-text-fill: #2d3436;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 0, 0, 0, 1);
}

.label.subtitle {
	-fx-font-size: 16px;
	-fx-font-weight: 500;
	-fx-text-fill: #636e72;
}

/* ==================== 按钮 (3D效果) ==================== */
.button {
	-fx-background-radius: 8px;
	-fx-border-radius: 8px;
	-fx-padding: 10px 20px;
	-fx-background-color: linear-gradient(to bottom, #ffffff 0%, #f1f2f6 100%);
	-fx-border-color: #dfe6e9;
	-fx-border-width: 1px;
	-fx-text-fill: #2d3436;
	-fx-cursor: hand;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 0, 2, 0, 1);
	-fx-transition: all 0.2s;
}

.button:hover {
	-fx-background-color: linear-gradient(to bottom, #ffffff 0%, #e0e4e8 100%);
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.15), 0, 3, 0, 2);
}

.button:pressed {
	-fx-background-color: linear-gradient(to bottom, #f1f2f6 0%, #d1d7dc 100%);
	-fx-effect: innershadow(gaussian, rgba(0,0,0,0.2), 5, 0, 0, 1);
	-fx-translate-y: 1px;
}

/* 主要按钮 (紫色渐变) */
.button.primary {
	-fx-background-color: linear-gradient(to bottom, #a29bfe 0%, #6c5ce7 100%);
	-fx-border-color: #5d4aec;
	-fx-text-fill: white;
}

.button.primary:hover {
	-fx-background-color: linear-gradient(to bottom, #9188fd 0%, #5d4aec 100%);
}

/* 成功按钮 (绿色渐变) */
.button.success {
	-fx-background-color: linear-gradient(to bottom, #55efc4 0%, #00b894 100%);
	-fx-border-color: #00a884;
	-fx-text-fill: white;
}

.button.success:hover {
	-fx-background-color: linear-gradient(to bottom, #4de0bb 0%, #00a884 100%);
}

/* 信息按钮 (蓝色渐变) */
.button.info {
	-fx-background-color: linear-gradient(to bottom, #74b9ff 0%, #0984e3 100%);
	-fx-border-color: #0873c7;
	-fx-text-fill: white;
}

.button.info:hover {
	-fx-background-color: linear-gradient(to bottom, #64a9f9 0%, #0873c7 100%);
}

/* 警告按钮 (黄色渐变) */
.button.warning {
	-fx-background-color: linear-gradient(to bottom, #ffeaa7 0%, #fdcb6e 100%);
	-fx-border-color: #fdbb4e;
	-fx-text-fill: #2d3436;
}

.button.warning:hover {
	-fx-background-color: linear-gradient(to bottom, #ffdf97 0%, #fdbb4e 100%);
}

/* 危险按钮 (红色渐变) */
.button.danger {
	-fx-background-color: linear-gradient(to bottom, #ff7675 0%, #d63031 100%);
	-fx-border-color: #c23636;
	-fx-text-fill: white;
}

.button.danger:hover {
	-fx-background-color: linear-gradient(to bottom, #ff6564 0%, #c23636 100%);
}

/* ==================== 输入控件 (玻璃效果) ==================== */
.text-field, .text-area, .password-field {
	-fx-background-color: rgba(255, 255, 255, 0.8);
	-fx-border-color: #b2bec3;
	-fx-border-radius: 8px;
	-fx-padding: 10px 15px;
	-fx-highlight-fill: #6c5ce7;
	-fx-highlight-text-fill: white;
	-fx-background-insets: 0;
	-fx-effect: innershadow(gaussian, rgba(0,0,0,0.05), 0, 0, 0, 1);
}

.text-field:focused, .text-area:focused, .password-field:focused {
	-fx-border-color: #6c5ce7;
	-fx-effect: dropshadow(gaussian, rgba(108,92,231,0.2), 0, 0, 0, 3), innershadow(gaussian, rgba(108,92,231,0.1), 5, 0, 0, 1);
	-fx-background-color: rgba(255, 255, 255, 0.9);
}

/* ==================== 表格 (半透明) ==================== */
.table-view {
	-fx-background-color: rgba(255, 255, 255, 0.85);
	-fx-border-color: #dfe6e9;
	-fx-border-radius: 8px;
	-fx-background-radius: 8px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 5, 0, 0, 1);
}

.table-view .column-header {
	-fx-background-color: linear-gradient(to bottom, rgba(241,242,246,0.9) 0%, rgba(223,230,233,0.9) 100%);
	-fx-border-color: #dfe6e9;
	-fx-font-weight: 600;
	-fx-text-fill: #2d3436;
}

.table-view .table-row-cell {
	-fx-border-color: rgba(223,230,233,0.5);
}

.table-view .table-row-cell:odd {
	-fx-background-color: rgba(248,249,250,0.5);
}

.table-view .table-row-cell:selected {
	-fx-background-color: rgba(108,92,231,0.1);
	-fx-text-fill: #2d3436;
}

/* ==================== 选项卡 (圆角设计) ==================== */
.tab-pane {
	-fx-background-color: transparent;
	-fx-tab-min-width: 120px;
}

.tab-pane .tab-header-area {
	-fx-background-color: transparent;
}

.tab-pane .tab-header-area .tab {
	-fx-background-color: rgba(241,242,246,0.8);
	-fx-border-color: #dfe6e9;
	-fx-border-radius: 8px 8px 0 0;
	-fx-background-radius: 8px 8px 0 0;
	-fx-font-weight: 500;
	-fx-padding: 8px 20px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 2, 0, 0, 1);
}

.tab-pane .tab-header-area .tab:selected {
	-fx-background-color: rgba(255,255,255,0.95);
	-fx-border-color: #dfe6e9 #dfe6e9 transparent #dfe6e9;
	-fx-font-weight: 600;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 3, 0, 0, 1);
}

/* ==================== 滚动条 (现代风格) ==================== */
.scroll-bar:vertical .thumb,
.scroll-bar:horizontal .thumb {
	-fx-background-color: #a5b1c2;
	-fx-background-radius: 4px;
	-fx-opacity: 0.7;
	-fx-transition: all 0.2s;
}

.scroll-bar .thumb:hover {
	-fx-background-color: #778ca3;
	-fx-opacity: 1;
}

.scroll-bar .track {
	-fx-background-color: rgba(241,242,246,0.5);
	-fx-background-radius: 4px;
}

/* ==================== 复选框 & 单选按钮 (圆形设计) ==================== */
.check-box .box {
	-fx-background-color: white;
	-fx-border-color: #b2bec3;
	-fx-border-radius: 4px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 1, 0, 0, 1);
}

.check-box:selected .mark {
	-fx-background-color: #6c5ce7;
	-fx-shape: "M 0 4 L 4 8 L 10 0 L 8 0 L 4 6 L 2 4 Z";
}

.radio-button .radio {
	-fx-background-color: white;
	-fx-border-color: #b2bec3;
	-fx-border-radius: 10px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.05), 1, 0, 0, 1);
}

.radio-button:selected .dot {
	-fx-background-color: #6c5ce7;
	-fx-background-radius: 5px;
	-fx-padding: 4px;
}

/* ==================== 滑块 (圆形手柄) ==================== */
.slider .thumb {
	-fx-background-color: #6c5ce7;
	-fx-background-radius: 8px;
	-fx-pref-width: 16px;
	-fx-pref-height: 16px;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 2, 0, 0, 1);
}

.slider .track {
	-fx-background-color: #dfe6e9;
	-fx-background-radius: 4px;
	-fx-pref-height: 6px;
}

.slider .track:hover {
	-fx-background-color: #b2bec3;
}

/* ==================== 进度条 (渐变效果) ==================== */
.progress-bar .bar {
	-fx-background-color: linear-gradient(to right, #a29bfe 0%, #6c5ce7 100%);
	-fx-background-insets: 0;
	-fx-background-radius: 3px;
}

.progress-bar .track {
	-fx-background-color: #f1f2f6;
	-fx-background-radius: 3px;
}

/* ==================== 工具提示 (磨砂玻璃效果) ==================== */
.tooltip {
	-fx-background-color: rgba(255,255,255,0.95);
	-fx-border-color: rgba(223,230,233,0.8);
	-fx-text-fill: #000000;
	-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 5, 0, 0, 1);
	-fx-font-size: 13px;
	-fx-background-radius: 8px;
	-fx-border-radius: 8px;
	-fx-padding: 10px;
	-fx-backdrop-filter: blur(5px);
}

/* ==================== 菜单 (磨砂玻璃) ==================== */
.menu-bar {
	-fx-background-color: rgba(241,242,246,0.8);
	-fx-border-color: rgba(223,230,233,0.8);
	-fx-backdrop-filter: blur(5px);
}

.menu-item {
	-fx-padding: 10px 25px;
	-fx-background-color: transparent;
}

.menu-item:hover {
	-fx-background-color: rgb(0, 0, 0);
}

.context-menu {
	-fx-background-color: rgba(255,255,255,0.95);
	-fx-border-color: rgba(223,230,233,0.8);
	-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 5, 0, 0, 1);
	-fx-background-radius: 8px;
	-fx-border-radius: 8px;
	-fx-backdrop-filter: blur(5px);
}

/* ==================== 卡片设计 ==================== */
.card {
	-fx-background-color: rgba(255,255,255,0.95);
	-fx-border-color: rgba(223,230,233,0.8);
	-fx-border-radius: 12px;
	-fx-background-radius: 12px;
	-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10, 0, 0, 2);
	-fx-padding: 20px;
	-fx-backdrop-filter: blur(2px);
}

.card-title {
	-fx-font-size: 18px;
	-fx-font-weight: 600;
	-fx-text-fill: #000000;
	-fx-padding: 0 0 10px 0;
}

/* ==================== 分隔线 (渐变效果) ==================== */
.separator {
	-fx-background-color: linear-gradient(to right, transparent 0%, #dfe6e9 50%, transparent 100%);
	-fx-padding: 1px 0;
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
	from { -fx-opacity: 0; }
	to { -fx-opacity: 1; }
}

.animated {
	-fx-animation: fadeIn 0.3s ease-in;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 600px) {
	.root {
		-fx-font-size: 13px;
	}

	.button {
		-fx-padding: 8px 15px;
	}

	.card {
		-fx-padding: 15px;
	}
}